<template>
  <div>
    <h3>商品清单如下:</h3>
    <p><span>可比克薯片</span>&nbsp;<span>5.5/份</span></p>
    <p><span>草莓酱</span>&nbsp;<span>3.5/份</span></p>
    <p><span>红烧肉</span>&nbsp;<span>55/份</span></p>
    <p><span>方便面</span>&nbsp;<span>12/份</span></p>
    <h3>请选择购买数量:</h3>
    <goods v-for="(item, index) in arr" 
    :key="index"
    :item="item"
    ></goods>
    <p>总价为{{ sum }}</p>
  </div>
</template>

<script>
import goods from './components/goods.vue'

export default {
  components: {
    goods

  },
  data() {
    return {
      arr: [
        {
          shopName: "可比克薯片",
          price: 5.5,
          count: 0,
        },
        {
          shopName: "草莓酱",
          price: 3.5,
          count: 0,
        },
        {
          shopName: "红烧肉",
          price: 55,
          count: 0,
        },
        {
          shopName: "方便面",
          price: 12,
          count: 0,
        },
      ],
    };
  },
  computed: {
    sum() {
      let total = 0
      this.arr.forEach(item => total += item.price * item.count)
      return total
    }
  }
};
</script>

<style>
</style>